<template>
    <el-card>
        <template #header>
            <el-page-header @back="onBack">
                <template #breadcrumb>
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">
                            homepage
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>route</el-breadcrumb-item>
                    </el-breadcrumb>
                </template>

            </el-page-header>
        </template>
        <div id="main"></div>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'

import { ElNotification as notify } from 'element-plus'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';


const router = useRouter()
let myChart

const initLineChart = () => {
    var chartDom = document.getElementById('main');
    myChart = echarts.init(chartDom);
    var option;

    var app = {};



    const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
    ];
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: posList.reduce(function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            const labelOption = {
                rotate: app.config.rotate,
                align: app.config.align,
                verticalAlign: app.config.verticalAlign,
                position: app.config.position,
                distance: app.config.distance
            };
            myChart.setOption({
                series: [
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    },
                    {
                        label: labelOption
                    }
                ]
            });
        }
    };
    const labelOption = {
        show: true,  // 是否显示
        position: app.config.position,//标签的位置。
        distance: app.config.distance,//距离图形元素的距离。
        align: app.config.align,//文字水平对齐方式，默认自动。
        verticalAlign: app.config.verticalAlign,//文字垂直对齐方式，默认自动。
        rotate: app.config.rotate,//标签旋转。从 -90 度到 90 度。正值是逆时针。
        formatter: '{c}  {name|{a}}',// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
        fontSize: 16,//文字的字体大小。
        rich: {//在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
            name: {}//
        }
    };
    option = {
        tooltip: { // 提示框组件
            trigger: 'axis',  // 触发类型  坐标轴触发
            axisPointer: { // 坐标轴配置项
                type: 'shadow' // 指示器类型   阴影
            }
        },
        legend: { //图例组件
            data: ['Forest', 'Steppe', 'Desert', 'Wetland'] // 图例的数据数组
        },
        toolbox: { // 工具栏
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: { // 各工具配置项
                dataView: { show: true, readOnly: false }, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                magicType: { show: true, type: ['line', 'bar', 'stack'] }, //动态类型切换
                restore: { show: true }, // 配置项还原
                saveAsImage: { show: true } // 保存为图片
            }
        },
        xAxis: [ // x轴
            {
                type: 'category', // 坐标轴类型 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
                axisTick: { show: false }, // 是否显示坐标轴刻度。
                data: ['2012', '2013', '2014', '2015', '2016'] // 类目数据，在类目轴（type: 'category'）中有效。
            }
        ],
        yAxis: [ //直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
            {
                type: 'value' // 坐标轴类型。'value' 数值轴，适用于连续数据。
            }
        ],
        series: [
            {
                name: 'Forest',
                type: 'bar', // bar 柱状图
                barGap: 0, // 不同系列的柱间距离，为百分比（如 '20%'，表示柱子宽度的 20%）。
                label: labelOption, // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390]
            },
            {
                name: 'Steppe',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290]
            },
            {
                name: 'Desert',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190]
            },
            {
                name: 'Wetland',
                type: 'bar',
                label: labelOption,
                emphasis: {
                    focus: 'series'
                },
                data: [98, 77, 101, 99, 40]
            }
        ]
    };

    option && myChart.setOption(option);

}

onMounted(initLineChart)
window.onresize = () => {
    myChart.resize();
}

const onBack = () => {
    notify('Back')
    router.push('home')
}
</script>
<style>
#main {
    height: 500px;
}
</style>
